<template>
  <a-list
      size="large"
      rowKey="id"
      :loading="loading"
      itemLayout="vertical"
      :dataSource="resList"
  >
    <a-list-item :key="item.resId" slot="renderItem" slot-scope="item">
      <div class="resContent" style="line-height: 30px">
        <span class="title">资源标题:</span> <span class="cursor" @click="$router.push({name:'resDetail',params:{resId:$encry(item.resId)}})">{{ item.resTitle }}</span><br/>
        <span class="title">资源介绍:</span> {{ item.resDesc | textFilter(200)}}<br/>
        <span class="title">资源URL:</span> {{ item.resUrl }}<br/>
        <span class="title">资源获取描述:</span> {{ item.resUrlDesc | textFilter(200)}}<br/>
        <span class="title">个性标签:</span> <a-tag class="cursor" v-for="tag in item.resLableList || []" :key="tag">{{tag}}</a-tag> <br/>
        <span class="title">发布时间:</span> {{ $moment(item.resPushTime).format('yyyy-MM-DD HH:mm:ss') }}<br/>
        <div>
          <a-space>
            <a-button v-if="userId == $store.state.user.loginUser.userId" type="danger" ghost size="small" @click="removeModal(item)">
              删除
            </a-button>
          </a-space>
        </div>
      </div>
    </a-list-item>
    <div slot="footer" v-if="resList.length > 0" style="text-align: center; margin-top: 16px;">
      <a-button @click="loadMore" :loading="loadingMore">加载更多</a-button>
    </div>
  </a-list>
</template>

<script>
import IconText from "@/components/myinfo/IconText";
import {getMyResource, removeRes} from "@/api/resourse";

export default {
  name: 'MyResource',
  components: {
    IconText
  },
  props:{
    userId:undefined
  },
  data () {
    return {
      pageSize:3,
      loading: true,
      loadingMore: false,
      resList: []
    }
  },
  mounted () {
    this.getList(this.pageSize)
  },
  methods: {
    async getList(pageSize) {
      const result = await getMyResource(pageSize,this.userId);
      const {code, data, msg} = result;
      if (code === 200) {
        this.loading = false;
        this.resList = data;
      } else {
        this.$message.error(msg);
      }
    },
    // 加载更多
    loadMore() {
      this.loadingMore = true
      try {
        this.getList(this.pageSize + 3);
      } finally {
        this.loadingMore = false;
      }
    },
    // 删除模态框
    removeModal(item) {
      const _this = this;
      this.$confirm({
        title: '删除博客',
        content: '真的要删除嘛?',
        okText: '确认',
        okType: 'danger',
        cancelText: '放弃',
        onOk() {
          removeRes(item.resId).then(res => {
            const {code, msg} = res;
            if (code === 200) {
              _this.$message.success(msg);
              _this.getList(_this.pageSize);
            } else {
              _this.$message.error(msg);
            }
          }).catch(error => {
            console.log(error);
            _this.$message.error("操作异常");
          })
        },
        onCancel() {
          console.log("取消了删除");
        },
      });
    },
  }
}
</script>

<style lang="less" scoped>
.title{
  font-weight: 600;
}
</style>
